<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>车辆控制面板</title>  
    <script src="config.js"></script>  
    <link rel="stylesheet" href="style.css">  
    <!-- 引入ECharts -->
    <script src="echarts.min.js"></script>
</head>  
<body>  
    <!-- 主容器 -->  
    <div class="main-container">  

        <!-- 主要内容区域 -->  
        <div class="main-content">  
            <!-- 左侧：车辆状态显示区 -->  
            <aside class="status-panel">  
                <div class="panel-header">  
                    <h2>车辆状态监控</h2>  
                </div>  
                
                <div class="status-grid">  
                    <!-- 底盘状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>底盘状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">车速</span>  
                                <span class="status-value" id="status-speed">-- m/s</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="status-steering-angle">-- °</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="status-gear">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="status-brake-pedal">-- %</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="status-throttle-pedal">-- %</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 物理输入 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>物理输入</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-input">-- %</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-input">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-input">-- °</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-input">-- %</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 程序输入 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>程序输入(VS)</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-command">-- %</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-command">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-command">-- °</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-command">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位拒绝</span>  
                                <span class="status-value" id="gear-reject">--</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 接管状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>接管状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-override">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-override">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-override">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-override">--</span>  
                            </div>  
                        </div>  
                    </div>  

                    <!-- 握手状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>握手状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-value" id="throttle-handshake">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-value" id="brake-handshake">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-value" id="steering-handshake">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-value" id="gear-handshake">--</span>  
                            </div>  
                        </div>  
                    </div>  
                    
                    <!-- 控制状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>前端控制指令</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">油门</span>  
                                <span class="status-disabled" id="control-throttle-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">刹车</span>  
                                <span class="status-disabled" id="control-brake-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">方向盘</span>  
                                <span class="status-disabled" id="control-steering-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">挡位</span>  
                                <span class="status-disabled" id="control-gear-status">-- | 禁用</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">驾驶模式</span>  
                                <span class="status-value" id="control-driving-mode">-- | 泊车</span>  
                            </div>  
                        </div>  
                    </div>  
                    
                    <!-- websocket系统状态 -->  
                    <div class="status-card">  
                        <div class="card-header">  
                            <h3>WebSocket状态</h3>  
                        </div>  
                        <div class="status-list">  
                            <div class="status-item">  
                                <span class="status-label">服务器</span>  
                                <span class="status-disabled" id="server-status">离线</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">连接数</span>  
                                <span class="status-value" id="connected-clients">0</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">数据序号</span>  
                                <span class="status-value" id="data-sequence">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">更新时间</span>  
                                <span class="status-value" id="last-update">--</span>  
                            </div>  
                            <div class="status-item">  
                                <span class="status-label">面板模式</span>  
                                <span class="status-value" id="panel-mode">--</span>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </aside>  

            <!-- 中间：控制面板区 -->  
            <main class="control-panel-main">  
                <!-- 全局控制区 -->  
                <section class="global-controls">  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>系统控制</h3>  
                        </div>  
                        
                        <div class="control-row">  
                            <div class="switch-group">  
                                <span class="switch-label">控制模式</span>  
                                <label class="switch">  
                                    <input type="checkbox" id="panel-mode-toggle">  
                                    <span class="slider"></span>  
                                </label>  
                                <span class="status-value" id="panel-mode-text">展示</span>  
                            </div>  
                        </div>  

                        <div class="input-row">  
                            <div id="ip-input" class="control-enabled">  
                                <div class="input-group">  
                                    <label for="ip-address">IP地址</label>  
                                    <input type="text" id="ip-address" placeholder="192.168.1.100" value="">  
                                </div>  
                                <div class="input-group">  
                                    <label for="port-number">端口</label>  
                                    <input type="number" id="port-number" placeholder="8080" value="8080" min="1" max="65535">  
                                </div>  
                            </div>  
                        </div>  

                        <div class="control-row">  
                            <div class="switch-group">  
                                <span class="switch-label">连接</span>  
                                <label class="switch">  
                                    <input type="checkbox" id="connection-toggle">  
                                    <span class="slider"></span>  
                                </label>  
                                <span class="connect-status-text disconnected" id="connect-status-text">未连接</span>  
                            </div>  
                        </div>  

                        <div class="connection-status disconnected" id="connection-status">未连接</div>  

                        <div class="button-row">  
                            <button id="enable-all-btn" class="btn-primary">全部启用</button>  
                            <button id="disable-all-btn" class="btn-danger">紧急停止</button>  
                            <button id="config-save-btn" class="btn-primary">保存配置</button> 
                        </div>  

                        <div class="number-input-group">
                            <label class="number-input-label">油门配置:</label>
                            <input type="text" id="throttle-min" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">~
                            <input type="text" id="throttle-max" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">:
                            <input type="text" id="throttle-step" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">|
                            <input type="text" id="throttle-init" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">
                        </div>
                        <div class="number-input-group">
                            <label class="number-input-label">刹车配置:</label>
                            <input type="text" id="brake-min" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">~
                            <input type="text" id="brake-max" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">:
                            <input type="text" id="brake-step" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">|
                            <input type="text" id="brake-init" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">

                        </div>
                        <div class="number-input-group">
                            <label class="number-input-label">方向盘配置:</label>
                            <input type="text" id="steering-min" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">~
                            <input type="text" id="steering-max" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">:
                            <input type="text" id="steering-step" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">|
                            <input type="text" id="steering-init" class="number-input" placeholder="0.0" pattern="^-?\d*\.?\d+$">
                        </div>

                        <div class="help-text">  
                            格式: IP:端口 (例: ws://192.168.1.100:8080); 
                            紧急停止:G键; 
                            配置：最小值~最大值:步长|初始值
                        </div>  
                    </div>  

                     <!-- 综合数据曲线图 -->
                    <div class="chart-card chart-card-large">
                        <div class="chart-header">
                            <h4>综合数据监控</h4>
                            <div class="chart-controls">
                                <button class="chart-btn active" data-chart="comprehensive">实时</button>
                                <button class="chart-btn" data-chart="comprehensive">暂停</button>
                                <button class="chart-btn" data-chart="comprehensive">清除</button>
                            </div>
                        </div>
                        <div class="chart-container chart-container-large" id="comprehensive-chart">
                            <!-- 综合数据曲线图将在这里渲染 -->
                            <!-- <canvas class="chart-canvas"></canvas> -->
                        </div>
                    </div>


                </section>  

                <!-- 车辆控制区 -->  
                <section class="vehicle-controls">  
                    <!-- 油门控制 -->  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>油门</h3>  
                        </div>  
                        <div class="value-display-large" id="throttle-value">0.0</div>  
                        <div id="throttle-controls" class="control-disabled">  
                            <input type="range" id="throttle" min="0" max="4" step="0.01" value="0" class="control-slider">  
                        </div>
                        <div class="number-input-group">
                            <label class="number-input-label">值:</label>
                            <input type="text" id="throttle-cmd" class="number-input" pattern="^-?\d*\.?\d+$">
                        </div>
                        <button class="btn-min" id="throttle-apply">应用下方配置</button>
                        <label class="number-input-label">范围:</label>
                        <div class="number-input-group">
                            <input type="text" id="throttle-min" class="number-input" placeholder="0.0">~
                            <input type="text" id="throttle-max" class="number-input" placeholder="0.0">
                        </div>
                        <label class="number-input-label">步长|初始:</label>
                        <div class="number-input-group">
                            <input type="text" id="throttle-step" class="number-input" placeholder="0.0">|
                            <input type="text" id="throttle-init" class="number-input" placeholder="0.0">
                        </div>
                        <button class="enable-button disabled" id="throttle-enable">油门已禁用</button>  
                        <div class="help-text">快捷键 W/S：油门 | Q：禁用油门 | 控制模式查看aviz type枚举值</div>  
                    </div>  

                    <!-- 刹车控制 -->  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>刹车</h3>  
                        </div>  
                        <div class="value-display-large" id="brake-value">0.0</div>  
                        <div id="brake-controls" class="control-disabled">  
                            <input type="range" id="brake" min="-3" max="4" step="0.01" value="0" class="control-slider">  
                        </div>
                        <!-- 独立数字输入框控制模式设置 -->
                        <div class="number-input-group">
                            <label class="number-input-label">控制模式:</label>
                            <input type="text" id="brake-number" value="0" class="number-input" placeholder="0" pattern="^-?\d+$">
                        </div>
                        <div class="number-input-group">
                            <label class="number-input-label">控制值:</label>
                            <input type="text" id="brake-cmd" class="number-input" pattern="^-?\d*\.?\d+$">
                        </div>
                        <button class="enable-button disabled" id="brake-enable">刹车已禁用</button> 
                        <div class="help-text">快捷键 A/D：刹车 | E：禁用刹车 | 控制模式查看aviz type枚举值</div>  
                    </div>  

                    <!-- 方向盘控制 -->  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>方向盘</h3>  
                        </div>  
                        <div class="value-display-large" id="steering-value">0.0</div>  
                        <div id="steering-controls" class="control-disabled">  
                            <input type="range" id="steering" min="-1" max="1" step="0.01" value="0" class="control-slider">  
                        </div>
                        <!-- 独立数字输入框控制模式设置 -->
                        <div class="number-input-group">
                            <label class="number-input-label">控制模式:</label>
                            <input type="text" id="steering-number" value="0" class="number-input" placeholder="0" pattern="^-?\d+$">
                        </div>
                        <div class="number-input-group">
                            <label class="number-input-label">控制值:</label>
                            <input type="text" id="steering-cmd"  class="number-input" pattern="^-?\d*\.?\d+$">
                        </div>
                        <button class="enable-button disabled" id="steering-enable">方向盘已禁用</button>  
                        <div class="help-text">快捷键 ←/→：方向盘 | 控制模式查看aviz type枚举值</div>  
                    </div>  

                    <!-- 挡位控制 -->  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>挡位</h3>  
                        </div>  
                        <div class="value-display-large" id="gear-value">NONE</div>  
                        <div id="gear-controls" class="control-disabled">  
                            <div class="gear-buttons">  
                                <button id="gear-p" class="gear-btn">P</button>  
                                <button id="gear-r" class="gear-btn">R</button>  
                                <button id="gear-d" class="gear-btn">D</button>  
                                <button id="gear-none" class="gear-btn active">NONE</button>  
                            </div>  
                        </div>
                        <button class="enable-button disabled" id="gear-enable">挡位已禁用</button>  

                        <button class="enable-button disabled" id="epb-enable">EPB已禁用</button>
                        <button class="enable-button disabled" id="epb-cmd">EPB命令已禁用</button>
                    </div>

                    <!-- 灯光控制 -->  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>灯光</h3>  
                        </div>  
                        <div class="value-display-large" id="light-value">NONE</div>
                        <div class="value-display-large" id="front-light-value">OFF</div>
                        <div id="light-controls" class="control-disabled">  
                            <div class="light-buttons">  
                                <button id="light-L" class="light-btn">L</button>  
                                <button id="light-R" class="light-btn">R</button>  
                                <button id="light-Harzd" class="light-btn">Harzd</button>  
                                <button id="light-none" class="light-btn active">NONE</button>  
                            </div>
                            <div class="front-light-buttons">  
                                <button id="front-light-OFF" class="front-light-btn active">OFF</button>  
                                <button id="front-light-LOW" class="front-light-btn">LOW</button>  
                                <button id="front-light-HIGH" class="front-light-btn">HIGH</button>  
                                <button id="front-light-OVERTAKING" class="front-light-btn">OVERTAKING</button>
                                <button id="front-light-AUTO" class="front-light-btn">AUTO</button>
                            </div> 
                        </div>  
                        <button class="enable-button disabled" id="light-enable">灯光已禁用</button>  
                    </div>

                    <!-- function请求控制 -->  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>function请求控制</h3>  
                        </div>  
                        <div class="number-input-group">
                            <label class="number-input-label">action模式:</label>
                            <input type="text" id="function_action" value="0" class="number-input" placeholder="0" pattern="^-?\d+$" onchange="sendControlData()">
                        </div>
                        <div class="number-input-group">
                            <label class="number-input-label">module_type模式:</label>
                            <input type="text" id="function_module_type" value="0" class="number-input" placeholder="0" pattern="^-?\d+$" onchange="sendControlData()">
                        </div>
                        <div class="number-input-group">
                            <label class="number-input-label">vs模式:</label>
                            <input type="text" id="vs_function_mode" value="0" class="number-input" placeholder="0" pattern="^-?\d+$" onchange="sendControlData()">
                        </div>
                        <button class="enable-button disabled" id="function-enable">function请求已禁用</button>  
                        <div class="help-text">/msd/function_module_control.action | /msd/function_module_control.module_type.value | /system_manager/vehicle_service/request.highway_info.function_mode.value</div>  
                    </div>  

                    <!-- 驾驶模式控制 -->  
                    <div class="control-card">  
                        <div class="card-header">  
                            <h3>驾驶模式</h3>  
                        </div>  
                        <div class="value-display-large" id="drive-mode">泊车模式</div>  
                        <button id="mode-toggle" class="mode-toggle-btn">切换行车模式</button>  

                        <div id="parking-status-selector" class="parking-status-selector">  
                            <h4>泊车状态</h4>  
                            <div class="parking-status-buttons">  
                                <button id="parking-in-progress" class="parking-button active pulse">泊入中</button>  
                                <button id="parking-completed" class="parking-button complete">泊入完成</button>  
                            </div>  
                        </div>  

                        <div class="help-text" id="mode-description">车辆已停止，可进行泊车操作</div>  
                    </div>  
                </section>  
            </main>  

            <!-- 右侧：数据可视化区 -->  
            <aside class="chart-panel">  
                <div class="panel-header">  
                    <h2>数据可视化</h2>  
                </div>  
                
                <!-- 曲线图区域 -->  
                <div class="chart-grid">  

                    <!-- 曲线图-1 -->  
                    <div class="chart-card">  
                        <!-- <div class="chart-header">  
                            <h4>车速变化</h4>  
                        </div>   -->
                        <div class="chart-container" id="chart-1">  
                            <!-- 车速曲线图将在这里渲染 -->  
                            <canvas class="chart-canvas"></canvas>  
                        </div>  
                    </div>  

                    <!-- 曲线图-2 -->  
                    <div class="chart-card">  
                        <!-- <div class="chart-header">  
                            <h4>方向盘角度</h4>  
                        </div> -->
                        <div class="chart-container" id="chart-2">
                            <!-- 方向盘角度曲线图将在这里渲染 -->
                            <canvas class="chart-canvas"></canvas>
                        </div>
                    </div>

                    <!-- 曲线图-3 -->
                    <div class="chart-card">
                        <!-- <div class="chart-header">
                            <h4>油门/刹车</h4>
                        </div> -->
                        <div class="chart-container" id="chart-3">
                            <!-- 油门刹车曲线图将在这里渲染 -->
                            <canvas class="chart-canvas"></canvas>
                        </div>
                    </div>

                    <!-- 曲线图-4 -->
                    <div class="chart-card">
                        <!-- <div class="chart-header">
                            <h4>系统状态</h4>
                        </div> -->
                        <div class="chart-container" id="chart-4">
                            <!-- 系统状态曲线图将在这里渲染 -->
                            <canvas class="chart-canvas"></canvas>
                        </div>
                    </div>



                    <!-- 预留图表区域1 -->
                    <div class="chart-card chart-placeholder">
                        <!-- <div class="chart-header">
                            <h4>预留图表区域1</h4>
                        </div> -->
                        <div class="chart-container" id="reserved-chart-1">
                            <div class="chart-placeholder-content">
                                <p>可用于显示自定义数据</p>
                            </div>
                        </div>
                    </div>

                    <!-- 预留图表区域2 -->
                    <div class="chart-card chart-placeholder">
                        <div class="chart-header">
                            <h4>预留图表区域2</h4>
                        </div>
                        <div class="chart-container" id="reserved-chart-2">
                            <div class="chart-placeholder-content">
                                <p>可用于显示自定义数据</p>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <script src="figure_manager.js"></script>
    <script src="script.js"></script>



</body>
</html>